<template>
  <div class="query_filter">
    <span class="demonstration">开始日期</span>
    <el-date-picker
      v-model="reportFilter.begin"
      type="date" size="small"
      :editable="false"
      @change="query"
      value-format="yyyy-MM-dd"
      placeholder="开始日期"
      :picker-options="beforeDate">
    </el-date-picker>
    <span class="demonstration">结束日期</span>
    <el-date-picker
      v-model="reportFilter.end"
      @change="query"
      type="date" size="small"
      value-format="yyyy-MM-dd"
      :editable="false"
      placeholder="结束日期"
      :picker-options="beforeDate">
    </el-date-picker>
    <label for="type">报告类型</label>
    <el-select id="type" v-model="reportFilter.type" @change="query" size="small" placeholder="请选择">
      <el-option :value="type.id" v-for="type in report_type" :key="type.id" :label="type.name"></el-option>
    </el-select>
    <el-radio-group v-if="scopeType.length > 0" v-model="reportFilter.scopeType" @change="query">
      <el-radio :label="scope.id" v-for="scope in scopeType">{{scope.name}}</el-radio>
    </el-radio-group>
    <el-button type="primary" @click.stop="query" icon="el-icon-search"  size="small">查询</el-button>
    <div class="tabs">
      <el-tabs v-model="tabName" stretch="true">
        <el-tab-pane label="数据列表" name="data_list">
          <div v-if="tabName=='data_list'">
            <ReportList :report-filter="reportFilter" ref="ReportList"/>
          </div>
        </el-tab-pane>
        <el-tab-pane label="趋势图" name="trend_map" v-if="reportFilter.type===1||reportFilter.type===2">
          <div  v-if="tabName=='trend_map'">
            <TrendMap :report-filter="reportFilter" ref="TrendMap"/>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>

  </div>
</template>

<script>
  import moment from "moment"
  import ReportList from "./report/ReportList";
  import TrendMap from "./report/TrendMap"
  export default {
    name: 'ReportFilter',
    components: {TrendMap, ReportList},
    data() {
      return {
        tabName:"data_list",
        beforeDate:{
          disabledDate(time) {
             return moment().isBefore(time,"date")/* || moment().isSame(time,"date")*/
          }
        },
        report_type:[
          {id:1,name:'品牌统计分析'},
          {id:2,name:'渠道统计分析'},
          {id:3,name:'效率分析报告'},
          {id:4,name:'渠道品牌报告'}
        ],
        scopeType:[
          {id:1,name:'按天'},
          {id:2,name:'按周'},
          {id:3,name:'按月'},
          {id:0,name:'自定义'}
        ],
        reportFilter:{
          begin:moment().format('YYYY-MM-DD'),
          end:moment().format('YYYY-MM-DD'),
/*
          begin:moment().subtract(1, 'days').format('YYYY-MM-DD'),
          end:moment().subtract(1, 'days').format('YYYY-MM-DD'),
*/
          type:1,
          scopeType:1,
          showMap:false
        }
      }
    },
    methods:{
      query(){
        let sub = 'BrandList';
        if (this.tabName==='trend_map'){
          sub = 'TrendMap';
        }else {
          sub = 'ReportList';
          this.tabName="data_list";
        }
        this.$refs[sub]&& this.$refs[sub].query();
      }
    }
  }
</script>

<style scoped>
  .el-radio{
    margin-right: -10px;
  }
  .el-radio-group{
      margin-right: 10px;
  }
  .el-date-editor.el-input,.el-select{
    width: 160px;
  }
</style>
